<template>
	<view class="cell flex-between" @click="click" :style="style">
		<!-- 左边 -->
		<view class="left">
			<slot name="left"></slot>
			<template v-if="lIcon" >
				<m-icon spa="0 20 0 0" :type="lIcon"></m-icon>
			</template>
		</view>
		<!-- 文字 -->
		<view class="center">
			<slot name="center"></slot>
			<text>{{title}}</text>
		</view>
		<!-- 右边 -->
		<view class="right flex">
			<slot name="right"></slot>
			<text v-if='rightText'>{{rightText}}</text>
			<m-icon v-if='rightIcon' size="28" color="var(--text)" :type="rightIcon"></m-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-cell",
		data() {
			return {
				
			};
		},
		props: {
			//左侧图标
			lIcon: {
				type: String,
				default: ''
			},
			title:{
				type: String,
				default: ''
			},
			rightText:{
				type: String,
				default: ''
			},
			rightIcon:{
				type: [String,Boolean],
				default: 'icon-qianjin'
			},
			border:{
				type: [String,Number],
				default: '1'
			},
			
		},
		methods:{
			click(){
				this.$emit("click")
			},
		},
		computed:{
			style(){
				return {
					'border-bottom-width':this.border+'rpx'
				}
			},
		},
	}
</script>

<style lang="scss">
	.cell{
		padding: 27rpx 0rpx;
		border-bottom-color:var(--border);
		border-bottom-style: solid;
	}
	.center{
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:var(--text);
	}
	.right{
		 font-size: 28rpx;
		 font-family: PingFang SC;
		 font-weight: 400;
		 color: var(--text);
		 
		 text{
			 margin-right: 18rpx;
		 }
	}
</style>
